<template>
  <div class="table-page lf">
    <a-form :model="listParams" layout="inline" size="small" class="w-full flex flex-wrap">
      <a-form-item label="提现账号类型" class="w-36n">
        <a-select class="w-36n" v-model="listParams.type" allow-clear placeholder="请选择" @change="changeCurrent(1)">
          <a-option value="" label="全部"></a-option>
          <a-option :value="1" label="法人支付宝"></a-option>
          <a-option :value="2" label="法人银行卡"></a-option>
          <a-option :value="3" label="企业对公户"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="邀请码" class="w-34n">
        <a-input v-model="listParams.inviteCode" placeholder="请输入" @pressEnter="changeCurrent(1)"> </a-input>
      </a-form-item>
      <a-form-item label="手机号" class="w-34n">
        <a-input v-model="listParams.mobile" placeholder="请输入" @pressEnter="changeCurrent(1)"> </a-input>
      </a-form-item>
      <a-form-item label="提现月份">
        <a-month-picker v-model="listParams.month" @change="changeCurrent(1)" />
      </a-form-item>
      <a-form-item label="打款账号" class="w-40n">
        <a-select
          class="w-40n"
          v-model="listParams.payAccount"
          allow-clear
          placeholder="请选择"
          @change="changeCurrent(1)"
        >
          <a-option value="" label="全部"></a-option>
          <a-option v-for="item in accountList" :key="item.id" :value="item.id" :label="item.name"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="打款状态" class="w-36n">
        <a-select class="w-36n" allow-clear v-model="listParams.status" placeholder="请选择" @change="changeCurrent(1)">
          <a-option value="" label="全部"></a-option>
          <a-option :value="10" label="待打款"></a-option>
          <a-option :value="20" label="打款成功"></a-option>
          <a-option :value="30" label="打款失败"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="打款凭证" class="w-34n">
        <a-input v-model="listParams.payVoucher" placeholder="请输入" @pressEnter="changeCurrent(1)"> </a-input>
      </a-form-item>
      <a-form-item hide-label class="w-fit">
        <a-button type="primary" size="small" @click="changeCurrent(1)">
          <template #icon>
            <icon-search />
          </template>
          <template #default>查询</template>
        </a-button>
        <a-button class="ml-m" size="small" @click="onResetSearch">
          <template #icon>
            <icon-sync />
          </template>
          <template #default>重置</template>
        </a-button>
      </a-form-item>
    </a-form>
    <GiTable
      row-key="id"
      id="corporatePayment"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      @refresh="getTableData"
    >
      <template #custom-extra>
        <a-alert>
          共
          {{ amount.totalCount }}条数据，待打款{{ amount.waitCount }}条，打款成功{{ amount.successCount }}条，打款失败{{
            amount.backCount
          }}条；提现金额￥{{ amount.totalAmount }}，待打款￥{{ amount.waitAmount }}，打款成功￥{{
            amount.successAmount
          }}，打款失败￥{{ amount.backAmount }}！
        </a-alert>
      </template>
      <template #user="{ record }">
        <div class="flex-col">
          <span>邀请码：{{ record.user.inviteCode }}</span>
          <span>手机号：{{ record.user.mobile }}</span>
        </div>
      </template>
      <template #account="{ record }">
        <div class="flex-col" v-if="record?.accountInfo.type == 1">
          <span>法人：{{ record?.accountInfo?.accountName ?? '--' }}</span>
          <span>支付宝：{{ record?.accountInfo?.accountNumber ?? '--' }}</span>
        </div>
        <div class="flex-col" v-else-if="record?.accountInfo.type == 2">
          <span>法人：{{ record?.accountInfo?.accountName ?? '--' }}</span>
          <span
            >银行卡：{{ record?.accountInfo?.bankName ?? '--' }}<br />
            {{ record?.accountInfo?.accountNumber ?? '--' }}</span
          >
        </div>
        <div class="flex-col" v-else-if="record?.accountInfo.type == 3">
          <span>户名：{{ record?.accountInfo.accountName ?? '--' }}</span>
          <span>对公账户：{{ record?.accountInfo?.accountNumber ?? '--' }} </span>
          <span>开户行：{{ record?.accountInfo?.bankName ?? '--' }} </span>
        </div>
        <div v-else>--</div>
      </template>
      <template #status="{ record }">
        <div class="flex flex-j-c">
          <GiDot
            :type="
              record.status == 10 ? 'warning' : record.status == 20 ? 'success' : record.status == 30 ? 'info' : 'info'
            "
            :text="
              record.status == 10
                ? '待打款'
                : record.status == 20
                ? '打款成功'
                : record.status == 30
                ? '打款失败'
                : '--'
            "
            :animation="false"
          />
        </div>
      </template>
      <template #action="{ record }">
        <a-button
          type="primary"
          size="small"
          shape="round"
          @click="onExamine({ ...record, opType: 1 })"
          :disabled="record.status != 10"
        >
          打款
        </a-button>
        <a-button
          class="ml-10"
          type="primary"
          size="small"
          shape="round"
          @click="onExamine({ ...record, opType: 0 })"
          :disabled="record.status != 10"
        >
          退回余额
        </a-button>
      </template>
      <template #refuseReason="{ record }">
        <div v-if="record.refuseReason" class="text-red text-overflow-2">
          <a-tooltip :content="record.refuseReason">
            <span>{{ record.refuseReason }}</span>
          </a-tooltip>
        </div>
        <span v-else>--</span>
      </template>
    </GiTable>
  </div>
</template>

<script setup>
import { usePagination, useLayer } from '@/hooks'
import { accountTransferList, accountTransferSelfAccountList, accountTransferSearchHeadData } from '@/apis'
import { deepClone, deleteEmpty, reAssign } from '@/utils/common'
import Examine from './Examine.vue'
import dayjs from 'dayjs'
defineOptions({ name: 'corporatePayment' })

const columns = ref([
  {
    title: '提现用户',
    slotName: 'user',
    width: 150
  },
  {
    title: '提现金额',
    dataIndex: 'amount',
    align: 'center',
    render: ({ record }) => {
      const amount = record.amount || 0
      return `￥${amount}`
    },
    width: 120
  },
  {
    title: '提现申请时间',
    dataIndex: 'submitTime',
    align: 'center',
    width: 180
  },
  {
    title: '提现账号',
    slotName: 'account',
    width: 200
  },
  {
    title: '打款账号',
    dataIndex: 'payAccount',
    render: ({ record }) => {
      return record.payAccountName || '--'
    },
    align: 'center',
    width: 160
  },
  {
    title: '打款凭证',
    dataIndex: 'payVoucher',
    render: ({ record }) => {
      return record.payVoucher || '--'
    },
    align: 'center',
    width: 160
  },
  {
    title: '状态',
    slotName: 'status',
    align: 'center',
    width: 120
  },
  {
    title: '操作',
    width: 180,
    align: 'center',
    slotName: 'action'
  },
  {
    title: '备注',
    slotName: 'refuseReason',
    width: 120
  }
])

const loading = ref(false)
const tableData = ref([])
const accountList = ref([])
const amount = reactive({
  backAmount: 0,
  backCount: 0,
  successAmount: 0,
  successCount: 0,
  totalAmount: 0,
  totalCount: 0,
  waitAmount: 0,
  waitCount: 0
})

const listParams = reactive({
  page: 1,
  size: 10,
  payVoucher: undefined,
  status: undefined,
  type: undefined,
  month: dayjs().format('YYYY-MM'),
  mobile: undefined,
  inviteCode: undefined,
  payAccount: undefined
})

const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.size })

const getHeadData = (param) => {
  accountTransferSearchHeadData(param).then((res) => {
    reAssign(amount, res.data)
  })
}

const getAccountList = async () => {
  try {
    loading.value = true
    const res = await accountTransferSelfAccountList()
    accountList.value = res.data
    getTableData()
  } catch {
    loading.value = false
  }
}

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.size = pagination.pageSize
    const param = deepClone(listParams)
    getHeadData(deleteEmpty(param))
    const res = await accountTransferList(deleteEmpty(param))
    tableData.value = res.data.data.map((item) => {
      const index = accountList.value.findIndex((each) => each.id == item.payAccount)
      const payAccountName = index == -1 ? '--' : accountList.value[index].name
      return {
        ...item,
        payAccountName
      }
    })
    setTotal(res?.data?.total || 0)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getAccountList()
})

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 重置筛选查询
const onResetSearch = () => {
  listParams.payVoucher =
    listParams.status =
    listParams.type =
    listParams.month =
    listParams.mobile =
    listParams.inviteCode =
    listParams.payAccount =
      undefined
  changeCurrent(1)
}

// 操作
const onExamine = (item) => {
  useLayer().openLayer(
    Examine,
    {
      title: item.opType == 1 ? '企业对公打款（手动）' : '退回余额',
      params: { ...item },
      area: ['1000px', '80%']
    },
    getTableData
  )
}
</script>

<style lang="scss" scoped>
.textd90000 {
  color: #d90000;
}
.aggs {
  width: 100%;
  line-height: 26px;
  background-color: rgb(var(--primary-1));
  box-shadow: rgb(var(--primary-1)) solid 1px;
  border-radius: 4px;
  border: 1px solid $color-theme;
}
.text808080 {
  color: #808080;
}
.text-size-13 {
  font-size: 13px;
}
.textd43030 {
  color: #d43030;
}
.text2a82e4 {
  color: #2a82e4;
}
</style>
